<template>
	<el-drawer @closed="closed" size="30%" v-model="dialogVisible" direction="rtl"
		:title="`个人信息`" :with-header="true">
		<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="80px">
			<el-form-item label="用户名" prop="username">
				<el-input v-model="ruleForm.username" />
			</el-form-item>
			
			<el-form-item label="真实姓名" prop="realName">
				<el-input v-model="ruleForm.realName" />
			</el-form-item>
			<el-form-item label="手机号码" prop="phone">
				<el-input v-model="ruleForm.phone" />
			</el-form-item>
			<el-form-item label="昵称" prop="nickName">
				<el-input v-model="ruleForm.nickName" />
			</el-form-item>
			<el-form-item label="头像" prop="portrait">
				<Upload v-model:value="ruleForm.portrait" v-model:show-value="data.portraitValue" clearable />
			</el-form-item>

			<el-form-item class="save-button">
				<el-button type="primary" @click="() => submitForm(ruleFormRef)">{{ data.admins_id !== '' ? `编辑` : `添加`
				}}</el-button>
				<el-button @click="() => resetForm()">重置</el-button>
			</el-form-item>
		</el-form>
	</el-drawer>
</template>
<script setup lang="ts" name="PagesFormDrawer">
import { reactive, ref } from "vue";
import type { FormInstance, FormRules, FormItemRule } from "element-plus";
import { ElMessage } from "element-plus";
// import { all } from "@/api/modules/role";
import { add, edit } from "@/api/modules/admin";
import { Role } from "@/api/interface/role";
import { checkPhoneNumber } from "@/utils/eleValidate";
import Upload from "@/components/Upload/index.vue";

const dialogVisible = ref(false);
// openDialog
const openDialog = () => {
	dialogVisible.value = true;
};


/* 表单 */
const ruleFormRef = ref<FormInstance>();

interface RuleForm<ADMINS_ID = undefined | string> {
	username: string;
	password?: string;
	admins_id: ADMINS_ID;
	nickName: string;
	status: 1 | 0;
	portrait: File | string | undefined;
	realName: string;
	phone: string;
	[key: string]: any;
}
const originalForm = (): RuleForm => {
	return {
		username: "",
		password: "",
		nickName: "",
		status: 1,
		phone: "",
		portrait: undefined,
		admins_id: undefined,
		realName: ""
	};
};
/* 参数 */
const data = reactive<{
	drawerShow: boolean;
	admins_id: string;
	oldForm: RuleForm;
	restPass: boolean;
	roleSelect: Role.All[];
	rolrSelectLoad: boolean;
	color: string;
	portraitValue: string;
}>({
	drawerShow: false,
	restPass: false,
	portraitValue: "",
	admins_id: "",
	oldForm: originalForm(),
	roleSelect: [],
	rolrSelectLoad: false,
	color: document.documentElement.style.getPropertyValue("--el-color-primary") //全局皮肤颜色
});
/*  */

const ruleForm = reactive<RuleForm>(originalForm());
const passRule: Array<FormItemRule> = [
	{ required: true, message: "密码不为空", trigger: "blur" },
	{
		min: 5,
		message: "不能小于5字符",
		trigger: "blur"
	},
	{
		max: 20,
		message: "不能超过20字符",
		trigger: "blur"
	}
];
const rules = reactive<FormRules>({
	username: [
		{ required: true, message: "用户名称不为空", trigger: "blur" },
		{
			min: 5,
			message: "不能小于5字符",
			trigger: "blur"
		},
		{
			max: 20,
			message: "不能超过20字符",
			trigger: "blur"
		}
	],
	nickName: [
		{ required: true, message: "昵称不为空", trigger: "blur" },
		{
			max: 20,
			message: "不能超过20字符",
			trigger: "blur"
		}
	],
	realName: [
		{ required: true, message: "真实姓名不为空", trigger: "blur" },
		{
			max: 20,
			message: "不能超过20字符",
			trigger: "blur"
		}
	],
	role_id: [
		{ required: true, message: "权限不为空", trigger: "blur" }
  ],
	phone: [
		{ required: true, message: "电话号码", trigger: "blur" },
		{ required: true, validator: checkPhoneNumber, trigger: "blur" }
	]
});

const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate(async (valid, fields) => {
		if (valid) {
			// if (data.admins_id !== '') {
			// 	let form = ruleForm;
			// 	if (!data.restPass) delete form['password'];
			// 	await edit({ ...form, admins_id: data.admins_id } as RuleForm<number, string>);
			// 	ElMessage.success("编辑成功");
			// } else {
			// 	await add(ruleForm as RuleForm<number>);
			// 	ElMessage.success("添加成功");
			// }
			data.drawerShow = false;
			// emit("close");
		} else {
			console.log("error submit!", fields);
		}
	});
};

const resetForm = () => {
	const original: RuleForm = data.admins_id === '' ? originalForm() : data.oldForm;
	for (let key in original) if (ruleForm.hasOwnProperty(key)) ruleForm[key] = original[key];
};


/**
 * 关闭弹窗清空表单
 */
const closed = () => {
	const original: RuleForm = originalForm();
	for (let key in original) if (ruleForm.hasOwnProperty(key)) ruleForm[key] = original[key];
};

/*  */



const restPass = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	data.restPass = !data.restPass;
	if (data.restPass) {
		rules.password = passRule;
		ruleForm.password = "";
	} else {
		delete rules.password;
	}
	formEl.clearValidate(["password"]);
};

defineExpose({ openDialog });

</script>
<style scoped lang="scss">
//@import "./index.scss";

.save-button {
	margin-top: 50px;
}
</style>




<!-- <template>
	<el-dialog v-model="dialogVisible" title="个人信息" width="500px" draggable>
		<span>This is userInfo</span>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="dialogVisible = false">确认</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";
const dialogVisible = ref(false);

// openDialog
const openDialog = () => {
	dialogVisible.value = true;
};

defineExpose({ openDialog });
</script> -->
